<script setup>
// 导入组件
import { ElMessage } from 'element-plus'
// 导入接口
// 导入模块
import { computed, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import whxButton from './communication.vue'


// 全局变量
const router = useRouter()

// 表单数据
const checkUname = (rule, value, callback) => {
  if (/^.{2,8}$/.test(value)) {
    callback()
  } else {
    callback(new Error('至少2-8个字符'))
  }
}
const buttonName = '登录1'
const formData = ref({
  question: '',
  answer: '',
  uname: '',
  pwd: '',
})
const formRules = reactive({
  question: [{ required: true, message: '密保问题必须', trigger: 'change' }],
  answer: [
    { required: true, message: '密保答案必须', trigger: 'blur' },
    { min: 2, max: 8, message: '至少2-8个字符', trigger: 'blur' },
  ],
  uname: [
    { required: true, message: '账号必须', trigger: 'blur' },
    // { min: 2, max: 8, message: '至少2-8个字符', trigger: 'blur' },
    { validator: checkUname, trigger: 'blur' },
  ],
  pwd: [
    { required: true, message: '密码必须', trigger: 'blur' },
    { min: 2, max: 20, message: '至少2-20个字符', trigger: 'blur' },
  ],
})
// 密保问题
const question = [
  { label: '请选择你的名字', value: '请选择你的名字' },
  { label: '您游戏id', value: '您游戏的id' },
]
// 表单提交验证
const formRef = ref(null)
const handleSubmit = () => {
  formRef.value.validate((isSuccess) => {
    if (isSuccess) {
      // 请求接口
      // 判断返回数据：失败弹框提示，成功H5存储、提示、跳转
      console.log('登录成功：', formData)
      ElMessage.success('操作成功')
      router.push('/todos')
    }
  })
}
</script>

<template>
  <div class="login">
    <el-form size="large" :model="formData" :rules="formRules" ref="formRef">
      <el-form-item>
        <h1 class="title">平台</h1>
      </el-form-item>

      <el-form-item prop="question">
        <el-select v-model="formData.question" placeholder="请选择密保问题">
          <el-option v-for="(item, i) in question" :key="i" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="answer">
        <el-input v-model="formData.answer" placeholder="请输入密保答案"></el-input>
      </el-form-item>

      <el-form-item prop="uname">
        <el-input v-model="formData.uname" placeholder="请输入账号"></el-input>
      </el-form-item>

      <el-form-item prop="pwd">
        <el-input v-model="formData.pwd" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item>
        <!-- <el-button type="primary" @click="handleSubmit">登录</el-button> -->
        <whxButton :name=buttonName @handleSubmit="handleSubmit"></whxButton>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.title {
  color: black !important;
}

.login {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-form {
    width: 300px;

    h1 {
      color: #fff;
      font-size: 42px;
    }

    .el-select,
    .el-button {
      width: 100%;
    }
  }
}
</style>
